<template>
  <h3>{{ title }}</h3>
  <button @click="changeVal">setTitle</button>

  <p>
    modelValue:{{ modelValue }} <br /><button @click="valueChaneg">
      修改modelValue
    </button>
  </p>
</template>

<script>
export default {
  emits: ["update:title", "update:modelValue"],
  props: {
    title: {
      type: String,
    },
    titleModifiers: {},
    modelValue: String,
    modelModifiers: {
      default: () => ({}),
    },
  },
  created() {
    console.log(this.modelModifiers);
  },

  methods: {
    changeVal() {
      this.$emit(
        "update:title",
        this.titleModifiers?.trans
          ? "我是footer设置的标题"
          : "I am title from Footer"
      );
    },
    valueChaneg() {
      this.$emit(
        "update:modelValue",
        this.modelModifiers?.trans
          ? "我是修改之后的MyText"
          : "I am MyText With Change"
      );
    },
  },
};
</script>

<style lang="less" scoped>
div {
  cursor: pointer;
}
</style>